<template>
  <div class="menu">
    <el-menu
      :default-active="defaultActive"
      :router="router"
      :collapse="collapse"
    >
      <template v-for="(item, index) in data" :key="item[index]">
        <!-- 一级菜单 -->
        <el-menu-item
          v-if="!item[children] || !item[children].length"
          :index="String(item[index] || index)"
        >
          <component
            v-if="item[icon]"
            :is="`el-icon-${toLine(item[icon])}`"
            :key="item[index]"
          />
          <span>{{ item[name] }}</span>
        </el-menu-item>
        <!-- 二级菜单 -->
        <el-sub-menu v-else :index="String(item[index] || index)">
          <!-- 二级菜单标题 -->
          <template #title>
            <component
              v-if="item[icon]"
              :is="`el-icon-${toLine(item[icon])}`"
              :key="item[index]"
            />
            <span>{{ item[name] }}</span>
          </template>
          <!-- 二级菜单子项 -->
          <template
            v-for="(item1, index1) in item[children]"
            :key="item1[index1]"
          >
            <el-menu-item :index="String(item1[index] || `sub-${index1}`)">
              <component
                v-if="item1[icon]"
                :is="`el-icon-${toLine(item1[icon])}`"
              />
              <span>{{ item1[name] }}</span>
            </el-menu-item>
          </template>
        </el-sub-menu>
      </template>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import  "./index.scss";
import { toLine } from "@/utils/index.ts";
// import type { MenuItem } from "./types.ts";
import type { PropType } from "vue";

const props = defineProps({
  // 菜单数据
  data: {
    type: Array as PropType<any[]>,
    default: () => [],
    required: true,
  },
  // 默认选中项
  defaultActive: {
    type: String,
    default: "",
  },
  // 是否使用路由模式
  router: {
    type: Boolean,
    default: false,
  },
  // 是否折叠菜单
  collapse: {
    type: Boolean,
    default: false,
    required: true,
  },
  // 菜单名称 键名
  name: {
    type: String,
    default: "name",
  },
  // 菜单索引 键名
  index: {
    type: String,
    default: "index",
  },
  // 菜单图标 键名
  icon: {
    type: String,
    default: "icon",
  },
  // 子菜单 键名
  children: {
    type: String,
    default: "children",
  },
});
const emits = defineEmits(["update:collapse"]);
</script>

<style scoped lang="scss">

</style>
